<template>
	<view class="content">
		<!-- <u-icon name="arrow-left" color="#fff" class="backIcon" size="26" @click="back"></u-icon> -->
		<view class="topOne">
			<image src="/static/image/index_text1.png" mode="" class="indexText"></image>
		</view>
		<view class="" style="display: flex;justify-content: center;margin-top: 85rpx;">
			<image src="/static/image/real_text.png" mode="widthFix"></image>
		</view>
		<view class="box">
			<view class="df-sb" style="margin-top: 80rpx;">
				<view class="phoneText" style=""> 姓名 </view>
				<view class="ipt">
					<input type="text" placeholder="请输入姓名" style="font-size: 26rpx;color: #FDE8CE;"
						placeholder-class="placeholderStyle" v-model="name" />
				</view>
			</view>
			<view class="df-sb" style="margin-top: 80rpx;">
				<view class="phoneText" style=""> 证件号 </view>
				<view class="ipt">
					<input type="text" placeholder="请输入证件号" style="	font-size: 26rpx;color: #FDE8CE;"
						placeholder-class="placeholderStyle" v-model="idCard" />
				</view>
			</view>
			<button class="loginBtn" @click="real"> 认证 </button>
		</view>
	</view>
</template>
<script>
	import {
		realName,
		getUserInfo
	} from '../request/api.js'
	export default {
		data() {
			return {
				name: '',
				idCard: ''
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			validateIdCard(idCard) {
				// 正则表达式校验基本格式
				const reg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
				if (!reg.test(idCard)) {
					return false;
				}
				// 校验码验证
				if (idCard.length === 18) {
					const idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; // 加权因子
					const idCardY = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]; // 身份证校验位值
					let sum = 0;
					for (let i = 0; i < 17; i++) {
						sum += parseInt(idCard.substring(i, i + 1)) * idCardWi[i];
					}
					const idCardLast = idCard.substring(17).toUpperCase();
					const checkBit = idCardY[sum % 11];
					return idCardLast === checkBit.toString();
				}
				return true;
			},
			// 认证
			real() {
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return
				}
				console.log(this.validateIdCard(this.idCard));
				if (this.validateIdCard(this.idCard)) {} else {
					uni.showToast({
						title: '身份证号不合规',
						icon: 'none'
					});
					return
				}
				realName({
					idCard: this.idCard,
					name: this.name,
					id: uni.getStorageSync('userInfo').id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.result,
							icon: 'none'
						})
						getUserInfo({
							id: uni.getStorageSync('userInfo').id
						}).then(res => {
							if (res.code == 200) {
								uni.setStorageSync('userInfo', res.result)
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/index'
									})
								}, 2000)
							}
						})
					}
				})
			},
			// 返回按钮
			back() {
				uni.navigateBack()
			},
			//去注册
			toRegister() {
				uni.navigateTo({
					url: '/pages/register'
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		height: 100vh;
		background-color: #252026;
		padding: 0 30rpx;
		padding-bottom: 200rpx;
		overflow: hidden;

		.backIcon {
			margin-top: 50rpx;
		}

		.topOne {
			justify-content: center;
			display: flex;
			margin-bottom: 45rpx;

			.indexText {
				width: 500rpx;
				height: 170rpx;
				padding-top: 80rpx;
			}
		}

		.topTwo {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			// margin-bottom: 60rpx;
			.line {
				width: 690rpx;
				height: 1px;
				border-top: 1rpx solid;
				border-image: linear-gradient(270deg, rgba(252, 238, 220, 0), rgba(255, 250, 243, 1), rgba(252, 238, 220, 0)) 1 1;
			}

			.text2 {
				width: 480rpx;
				height: 31rpx;
				font-size: 24rpx;
				color: #FDE8CE;
				line-height: 31rpx;
				text-align: left;
				font-style: normal;
				text-align: center;
				margin: 13rpx 0;
			}
		}

		.box {
			width: 100%;
			height: 552rpx;
			background: #1C1A1F;
			padding: 0 50rpx;
			overflow: hidden;
		}
	}

	.phoneText {
		font-size: 26rpx;
		color: #FDE8CE;
		font-weight: 600;
		height: 50rpx;
	}

	.ipt {
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 40rpx;
		border-bottom: 1px solid #FDE8CE;
		width: 478rpx;
	}

	.loginBtn {
		width: 256rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: linear-gradient(#BA986B 0%, #F1DBB6 100%);
		border-radius: 37rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #2B1D14;
		text-align: center;
		margin-top: 145rpx;
	}

	.register {
		text-align: right;
		color: #FDE8CE;
		margin-top: 40rpx;
		font-size: 24rpx;
	}

	.placeholderStyle {
		color: #FDE8CE
	}
</style>